ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್: ಪ್ರೋಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆಪ್ ಕಾನ್ಫಿಗರೇಶನ್‌ಗೆ ನಿಮ್ಮ ಮಾರ್ಗದರ್ಶಿ

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಒಂದು JSON ಫೈಲ್ ಆಗಿದ್ದು, ಅದು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳಿಗೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಾಧನದಲ್ಲಿ ಆಪ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿದಾಗ ಈ ಮಾಹಿತಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಇದು ಪ್ರೋಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆಪ್ (PWA) ಆಗಿ ಹೇಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದಾದ, ಆಪ್ ತರಹದ ಅನುಭವವಾಗಿ ಪರಿವರ್ತಿಸುವ ನೀಲನಕ್ಷೆ ಎಂದು ಇದನ್ನು ಪರಿಗಣಿಸಿ. ಬಳಕೆದಾರರ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ಮತ್ತು ಶೋಧನೆಗಾಗಿ ಉತ್ತಮವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅತ್ಯಗತ್ಯ.

ಪ್ರೋಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆಪ್ (PWA) ಎಂದರೇನು?

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳುವ ಮೊದಲು, PWA ಎಂದರೇನು ಎಂಬುದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ನೋಡೋಣ. PWA ಗಳು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಾಗಿದ್ದು, ಬಳಕೆದಾರರಿಗೆ ಆಪ್ ತರಹದ ಅನುಭವವನ್ನು ನೀಡುತ್ತವೆ. ಅವುಗಳು:

• ವಿಶ್ವಾಸಾರ್ಹ: ಸರ್ವಿಸ್ ವರ್ಕರ್‌ಗಳ ಸಹಾಯದಿಂದ ತಕ್ಷಣವೇ ಲೋಡ್ ಆಗುತ್ತವೆ ಮತ್ತು ಆಫ್‌ಲೈನ್ ಅಥವಾ ಕಡಿಮೆ ಗುಣಮಟ್ಟದ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿಯೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.
• ವೇಗ: ಬಳಕೆದಾರರ ಸಂವಹನಗಳಿಗೆ ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳೊಂದಿಗೆ ತ್ವರಿತವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ ಮತ್ತು ಯಾವುದೇ ಅಡೆತಡೆಯಿಲ್ಲದ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ.
• ಆಕರ್ಷಕ: ಪುಶ್ ನೋಟಿಫಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಹೋಮ್ ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯದಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ತಲ್ಲೀನಗೊಳಿಸುವ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತವೆ.

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನ ಪಾತ್ರ

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಒಂದು PWA ಯ ಮೂಲಾಧಾರವಾಗಿದೆ. ಇದು ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅಗತ್ಯವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ:

• PWA ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು: ಇದು ಬಳಕೆದಾರರಿಗೆ ತಮ್ಮ ಸಾಧನಗಳಲ್ಲಿ ವೆಬ್ ಆಪ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅದನ್ನು ಅವರ ಹೋಮ್ ಸ್ಕ್ರೀನ್ ಅಥವಾ ಆಪ್ ಲಾಂಚರ್‌ಗೆ ಸೇರಿಸುತ್ತದೆ.
• PWA ಅನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲು: ಇದು ಆಪ್‌ನ ಹೆಸರು, ಐಕಾನ್‌ಗಳು, ಥೀಮ್ ಬಣ್ಣ ಮತ್ತು ಇತರ ದೃಶ್ಯ ಅಂಶಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• PWA ಯ ನಡವಳಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು: ಆಪ್ ಹೇಗೆ ಪ್ರಾರಂಭವಾಗಬೇಕು (ಉದಾಹರಣೆಗೆ, ಪೂರ್ಣ-ಸ್ಕ್ರೀನ್ ಮೋಡ್‌ನಲ್ಲಿ ಅಥವಾ ಪ್ರತ್ಯೇಕ ವಿಂಡೋ ಆಗಿ) ಮತ್ತು ಅದನ್ನು ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ನೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿಸಬೇಕು ಎಂಬುದನ್ನು ಇದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

ನಿಮ್ಮ `manifest.json` ಫೈಲ್ ಅನ್ನು ರಚಿಸುವುದು

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಒಂದು JSON ಫೈಲ್ ಆಗಿದ್ದು, ಸಾಮಾನ್ಯವಾಗಿ `manifest.json` ಎಂದು ಹೆಸರಿಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಇರಿಸಬೇಕು. ಇಲ್ಲಿದೆ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

ಈ ಪ್ರತಿಯೊಂದು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವಿಭಜಿಸಿ ನೋಡೋಣ:

`name`

ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪೂರ್ಣ ಹೆಸರು. ಬಳಕೆದಾರರು ಆಪ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು ಪ್ರೇರೇಪಿಸಿದಾಗ ಮತ್ತು ಆಪ್ ಲಾಂಚರ್‌ನಲ್ಲಿ ಈ ಹೆಸರು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

ನಿಮ್ಮ ಆಪ್ ಹೆಸರಿನ ಚಿಕ್ಕ ಆವೃತ್ತಿ. ಹೋಮ್ ಸ್ಕ್ರೀನ್ ಅಥವಾ ಆಪ್ ಲಾಂಚರ್‌ನಂತಹ ಸೀಮಿತ ಸ್ಥಳಾವಕಾಶವಿರುವಲ್ಲಿ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿಡಿ.

ಉದಾಹರಣೆ:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

ಆಪ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಲೋಡ್ ಆಗಬೇಕಾದ URL. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮುಖಪುಟವಾಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ನಿರ್ದಿಷ್ಟ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವೂ ಆಗಿರಬಹುದು.

ಉದಾಹರಣೆ:

            "start_url": "/"
            

              
                Copy
              
            
          

ಬಳಕೆದಾರರು ನಿಮ್ಮ PWA ಅನ್ನು ಹೇಗೆ ಪ್ರಾರಂಭಿಸುತ್ತಿದ್ದಾರೆ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ನೀವು ಕ್ವೆರಿ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ URL ಅನ್ನು ಸಹ ಬಳಸಬಹುದು:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

ಆಪ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಅದನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಬೇಕು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದರಲ್ಲಿ ಹಲವಾರು ಆಯ್ಕೆಗಳಿವೆ:

• `standalone`: ವಿಳಾಸ ಪಟ್ಟಿಯಂತಹ ಬ್ರೌಸರ್ UI ಅಂಶಗಳಿಲ್ಲದೆ ಆಪ್ ತನ್ನದೇ ಆದ ಉನ್ನತ ಮಟ್ಟದ ವಿಂಡೋದಲ್ಲಿ ತೆರೆಯುತ್ತದೆ.
• `fullscreen`: ಆಪ್ ಸಂಪೂರ್ಣ ಪರದೆಯನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ, ಸ್ಟೇಟಸ್ ಬಾರ್ ಅನ್ನು ಸಹ ಮರೆಮಾಡುತ್ತದೆ.
• `minimal-ui`: `standalone` ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಬ್ಯಾಕ್ ಬಟನ್ ಮತ್ತು ರಿಫ್ರೆಶ್ ಬಟನ್‌ನಂತಹ ಕನಿಷ್ಠ ಬ್ರೌಸರ್ UI ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
• `browser`: ಆಪ್ ಸಾಮಾನ್ಯ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಅಥವಾ ವಿಂಡೋದಲ್ಲಿ ತೆರೆಯುತ್ತದೆ.

ಶಿಫಾರಸು: PWA ಗಳಿಗಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ `standalone` ಆಯ್ಕೆಯನ್ನು ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

ಆಪ್ ಪ್ರಾರಂಭವಾದಾಗ ಅದರ ಸ್ಪ್ಲಾಶ್ ಸ್ಕ್ರೀನ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣ. ಆಪ್ ಐಕಾನ್ ಮತ್ತು ಆಪ್‌ನ ವಿಷಯದ ನಡುವೆ ಸುಗಮ ಪರಿವರ್ತನೆಯನ್ನು ಒದಗಿಸಲು ಇದು ಮುಖ್ಯವಾಗಿದೆ.

ಉದಾಹರಣೆ:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

ಆಪ್‌ನ UI ಅನ್ನು ಶೈಲಿ ಮಾಡಲು ಬಳಸುವ ಥೀಮ್ ಬಣ್ಣ, ಉದಾಹರಣೆಗೆ ಆಂಡ್ರಾಯ್ಡ್‌ನಲ್ಲಿನ ಸ್ಟೇಟಸ್ ಬಾರ್. ಈ ಬಣ್ಣವು ನಿಮ್ಮ ಆಪ್‌ನ ಬ್ರ್ಯಾಂಡಿಂಗ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗಬೇಕು.

ಉದಾಹರಣೆ:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಸರಣಿ, ಪ್ರತಿಯೊಂದೂ ಆಪ್‌ಗಾಗಿ ಒಂದು ಐಕಾನ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳಲ್ಲಿ ಆಪ್ ಚೆನ್ನಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಲು ನೀವು ವಿವಿಧ ಗಾತ್ರಗಳ ಅನೇಕ ಐಕಾನ್‌ಗಳನ್ನು ಒದಗಿಸಬೇಕು.

ಪ್ರತಿ ಐಕಾನ್‌ಗಾಗಿ ಪ್ರಾಪರ್ಟಿಗಳು:

• `src`: ಐಕಾನ್ ಚಿತ್ರದ URL.
• `sizes`: ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಐಕಾನ್‌ನ ಆಯಾಮಗಳು (ಉದಾ., "192x192").
• `type`: ಐಕಾನ್ ಚಿತ್ರದ MIME ಪ್ರಕಾರ (ಉದಾ., "image/png").

ಶಿಫಾರಸು ಮಾಡಲಾದ ಐಕಾನ್ ಗಾತ್ರಗಳು:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

ಉದಾಹರಣೆ:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

ಹೆಚ್ಚುವರಿ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಪ್ರಾಪರ್ಟಿಗಳು

ಮೇಲಿನ ಪ್ರಾಪರ್ಟಿಗಳು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾಗಿದ್ದರೂ, ನಿಮ್ಮ PWA ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಇನ್ನೂ ಅನೇಕ ಆಯ್ಕೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:

`id`

ನಿಮ್ಮ PWA ಗಾಗಿ ಒಂದು ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆ. ನೀವು ಒಂದೇ ಹೆಸರಿನ ಅನೇಕ PWA ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಸಂಘರ್ಷಗಳನ್ನು ತಡೆಯಲು ಇದು ಮುಖ್ಯವಾಗಿದೆ.

ಉದಾಹರಣೆ:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

ಆಪ್‌ನ ನ್ಯಾವಿಗೇಷನ್ ವ್ಯಾಪ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನೊಳಗಿನ ಯಾವ URL ಗಳನ್ನು PWA ಯ ಭಾಗವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ವ್ಯಾಪ್ತಿಯಿಂದ ಹೊರಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದರೆ, ಆಪ್ ಸಾಮಾನ್ಯ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆಯುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "scope": "/app/"
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `/app/` ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ URL ಗಳನ್ನು ಮಾತ್ರ PWA ಯ ಭಾಗವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

`orientation`

ಆಪ್‌ಗಾಗಿ ಆದ್ಯತೆಯ ಪರದೆಯ ದೃಷ್ಟಿಕೋನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಆಯ್ಕೆಗಳಲ್ಲಿ `portrait`, `landscape`, `any`, ಮತ್ತು ಹೆಚ್ಚಿನವು ಸೇರಿವೆ.

ಉದಾಹರಣೆ:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

ಸಂಬಂಧಿತ ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಸರಣಿ. ನಿಮ್ಮ PWA ಅನ್ನು ಈಗಾಗಲೇ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿರುವ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ನೇಟಿವ್ ಆಪ್‌ಗಳನ್ನು ಪ್ರಚಾರ ಮಾಡಲು ಇದು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಗೂಗಲ್ ಪ್ಲೇ ಸ್ಟೋರ್‌ನಲ್ಲಿ `com.example.myapp` ID ಯೊಂದಿಗೆ ಸಂಬಂಧಿತ ನೇಟಿವ್ ಆಪ್ ಇದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.

`prefer_related_applications`

PWA ಬದಲಿಗೆ ಸಂಬಂಧಿತ ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು ಬಳಕೆದಾರರನ್ನು ಪ್ರೇರೇಪಿಸಬೇಕೇ ಎಂದು ಸೂಚಿಸುವ ಒಂದು ಬೂಲಿಯನ್ ಮೌಲ್ಯ.

ಉದಾಹರಣೆ:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

ಆಪ್‌ನ ವರ್ಗಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಸರಣಿ. ಇದು ಆಪ್ ಸ್ಟೋರ್‌ಗಳು ಅಥವಾ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ನಿಮ್ಮ ಆಪ್ ಅನ್ನು ಹುಡುಕಲು ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

ಬಳಕೆದಾರರು ತಮ್ಮ ಹೋಮ್ ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿನ ಆಪ್ ಐಕಾನ್‌ನಿಂದ ಪ್ರವೇಶಿಸಬಹುದಾದ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ಆಪ್‌ನೊಳಗೆ ಸಾಮಾನ್ಯ ಕಾರ್ಯಗಳನ್ನು ತ್ವರಿತವಾಗಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

ನಿಮ್ಮ ವೆಬ್ ಆಪ್‌ಗೆ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಲಿಂಕ್ ಮಾಡುವುದು

ನೀವು ನಿಮ್ಮ `manifest.json` ಫೈಲ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ, ನಿಮ್ಮ HTML ನ `` ವಿಭಾಗಕ್ಕೆ `` ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಅದನ್ನು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಮೌಲ್ಯೀಕರಿಸುವುದು

ನಿಮ್ಮ `manifest.json` ಫೈಲ್ ಸರಿಯಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದೆಯೇ ಮತ್ತು ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅದನ್ನು ಮೌಲ್ಯೀಕರಿಸುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ನೀವು JSONLint ಅಥವಾ Chrome DevTools ನಂತಹ ಆನ್‌ಲೈನ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಬಹುದು.

ನಿಮ್ಮ PWA ಅನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಲಿಂಕ್ ಮಾಡಿದ ನಂತರ, ಅದು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ನಿಮ್ಮ PWA ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಬೇಕು. ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು Chrome DevTools (Application -> Manifest) ಬಳಸಿ.

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಿಮ್ಮ ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

• ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಒದಗಿಸಿ: `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, ಮತ್ತು `icons` ನಂತಹ ಎಲ್ಲಾ ಅಗತ್ಯ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೀವು ಸೇರಿಸಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸೂಕ್ತವಾದ ಐಕಾನ್ ಗಾತ್ರಗಳನ್ನು ಬಳಸಿ: ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಲು ವಿವಿಧ ಗಾತ್ರಗಳ ಅನೇಕ ಐಕಾನ್‌ಗಳನ್ನು ಒದಗಿಸಿ.
• ಸರಿಯಾದ ಡಿಸ್ಪ್ಲೇ ಮೋಡ್ ಅನ್ನು ಆರಿಸಿ: ನಿಮ್ಮ ಆಪ್‌ನ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಸೂಕ್ತವಾದ `display` ಮೋಡ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ. `standalone` ಸಾಮಾನ್ಯವಾಗಿ ಆದ್ಯತೆಯ ಆಯ್ಕೆಯಾಗಿದೆ.
• ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಮೌಲ್ಯೀಕರಿಸಿ: ನಿಮ್ಮ `manifest.json` ಫೈಲ್ ಸರಿಯಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಮೌಲ್ಯೀಕರಿಸಿ.
• ನಿಮ್ಮ PWA ಅನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ PWA ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
• ಎಸ್‌ಇಒಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ನಿಮ್ಮ ಆಪ್‌ನ ಶೋಧನೆಯನ್ನು ಸುಧಾರಿಸಲು ನಿಮ್ಮ `name`, `short_name`, ಮತ್ತು `description` ನಲ್ಲಿ ಸಂಬಂಧಿತ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಿ.
• ಸ್ಥಳೀಕರಣವನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಆಪ್ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿದ್ದರೆ, ವಿವಿಧ ಭಾಷೆಗಳಿಗೆ ವಿಭಿನ್ನ ಹೆಸರುಗಳು, ವಿವರಣೆಗಳು ಮತ್ತು ಐಕಾನ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನ ಸ್ಥಳೀಯ ಆವೃತ್ತಿಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಉತ್ತಮವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ಗಳ ಉದಾಹರಣೆಗಳು

ಜನಪ್ರಿಯ PWA ಗಳಿಂದ ಉತ್ತಮವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ಗಳ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನ ಭವಿಷ್ಯ

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಒಂದು ವಿಕಾಸಗೊಳ್ಳುತ್ತಿರುವ ಮಾನದಂಡವಾಗಿದ್ದು, ಕಾಲಾನಂತರದಲ್ಲಿ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ. ನಿಮ್ಮ PWA ಗಳು ಇತ್ತೀಚಿನ ತಂತ್ರಜ್ಞಾನಗಳ ಸಂಪೂರ್ಣ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯುತ್ತಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು W3C ಯಿಂದ ಇತ್ತೀಚಿನ ನವೀಕರಣಗಳು ಮತ್ತು ಶಿಫಾರಸುಗಳ ಮೇಲೆ ಕಣ್ಣಿಡಿ.

ತೀರ್ಮಾನ

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಯಾವುದೇ PWA ಯ ಒಂದು ಅತ್ಯಗತ್ಯ ಅಂಶವಾಗಿದೆ. ನಿಮ್ಮ ಮ್ಯಾನಿಫೆಸ್ಟ್ ಅನ್ನು ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಸುಗಮ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು, ನಿಮ್ಮ ವೆಬ್ ಆಪ್ ಅನ್ನು ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ನಂತೆ ಭಾಸವಾಗುವಂತೆ ಮಾಡಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿ ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನ ಸಮಗ್ರ ಅವಲೋಕನವನ್ನು ಒದಗಿಸಿದೆ, ಅದರ ಪ್ರಾಪರ್ಟಿಗಳು, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ. ಈ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ PWA ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ವಿಶ್ವಾದ್ಯಂತ ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡಬಹುದು.

ವೆಬ್ ಆಪ್ ಮ್ಯಾನಿಫೆಸ್ಟ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದಾದ, ಆಪ್ ತರಹದ ಅನುಭವಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ, ಅದು ಬಳಕೆದಾರರನ್ನು ಆನಂದಿಸುತ್ತದೆ ಮತ್ತು ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.